<html>

<head>
    <title>阿里云图片上传</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="./Base64.js"></script>
</head>

<body>
    <div class="container" style="padding: 100px;">
        <form id="testform" enctype="multipart/form-data">
            <legend>阿里云图片上传</legend>
            <div class="form-group">
                <label for="">选择图片</label>
                <input type="hidden" class="form-control" id="name" name="name" value="zgz.jpg">
                <input type="hidden" class="form-control" id="key" name="key" value="image/Temp/ApprovalTask/${filename}">
                <input type="hidden" class="form-control" id="policy" name="policy" value="">
                <input type="hidden" class="form-control" id="OSSAccessKeyId" name="OSSAccessKeyId" value="LTAI3M6GxA5Cvfev">
                <input type="hidden" class="form-control" id="success_action_status" name="success_action_status" value="200">
                <input type="hidden" class="form-control" id="signature" name="signature" value="ORlRS5Sfk6m55AcxUN0+/JDuk2c=">
                <input type="file" class="form-control" id="file" name="file">
            </div>
        </form>
            <button id="zgz" class="btn btn-primary">上传图片</button>
    </div>
    <script type="text/javascript">
    $(function() {

        var policyText = {
            "expiration": "2020-01-01T12:00:00.000Z", //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
            "conditions": [
                ["content-length-range", 0, 1048576000] // 设置上传文件的大小限制
            ]
        };

        var policyBase64 = new Base64().encode(JSON.stringify(policyText))

        console.log(policyBase64);

        $("#policy").val(policyBase64);


        $("#zgz").click(function() {

                  var selectedFile =$('#file').val();
                  if (selectedFile) {
                        // randomly generate the final file name
                        var ramdomName = Math.random().toString(36).substr(2) + $('#file').val().match(/\.?[^.\/]+$/);

                        console.log(ramdomName);
                        $('#name').val(ramdomName);
                  } else {
                        // return false;
                  }





            var f = new FormData(document.getElementById("testform"));

            $.ajax({
                url: 'http://flm158.oss-cn-shanghai.aliyuncs.com',
                type: 'POST',
                data: f,
                processData: false,
                contentType: false,
                success: function(res) {
                    console.log(res);
                },
                error: function(res) {
                    console.log("失败:" + JSON.stringify(res));
                }
            });

        });



    });
    </script>
</body>

</html>